<template>
    <div>
        <el-container>
            <el-header>
              <el-menu
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <a href="//sunxq.top">
                  <img class="logo" src="@/assets/logo2.png" alt="">
                </a>
                <el-submenu index="4">
                  <template slot="title">我的</template>
                  <el-menu-item index="4-1">设置</el-menu-item>
                  <el-menu-item index="4-2">修改密码</el-menu-item>
                  <el-menu-item index="4-3">退出</el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                  <template slot="title">导航</template>
                  <a href="http://sunxq.top:8070" target="_blank">
                    <el-menu-item index="5-1">Apollo配置中心</el-menu-item>
                  </a>
                  <a href="http://sunxq.top:3005" target="_blank">
                    <el-menu-item index="5-2">Verdaccio私有库</el-menu-item>
                  </a>
                  <a href="//kingui.sunxq.top" target="_blank">
                    <el-menu-item index="5-3">👑 KingUI</el-menu-item>
                  </a>
                </el-submenu>
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-menu-item index="2">消息中心</el-menu-item>
                <el-menu-item index="3">订单管理</el-menu-item>
              </el-menu>
            </el-header>
            <el-container class="content">
                <el-aside width="150px">
                  <el-menu
                    :default-active="currentPath"
                    class="left-menu"
                    @open="handleOpen"
                    @close="handleClose"
                    :router="true"
                    background-color="#5f6870"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-submenu index="1">
                      <template slot="title">
                        <i class="el-icon-user"></i>
                        <span>用户</span>
                      </template>
                      <el-menu-item index="/user" :route="{path:'/user'}">用户管理</el-menu-item>
                      <el-menu-item index="/role" :route="{path:'/role'}">角色管理</el-menu-item>
                      <el-menu-item index="/rights" :route="{path:'/rights'}">权限管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                      <template slot="title">
                        <i class="el-icon-s-data"></i>
                        <span>监控</span>
                      </template>
                      <el-menu-item index="/overview" :route="{path:'/overview'}">概览</el-menu-item>
                      <el-menu-item index="/error" :route="{path:'/error'}">错误</el-menu-item>
                      <el-menu-item index="/behave" :route="{path:'/behave'}">用户行为</el-menu-item>
                      <el-menu-item index="/performance" :route="{path:'/performance'}">性能</el-menu-item>
                    </el-submenu>
                  </el-menu>
                </el-aside>
                <el-main class="content-area">
                  <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            user: {},
            activeIndex: "1"
        };
    },
    computed: {
      currentPath () {
        return this.$route.path
      },
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    },
};
</script>

<style>
.el-menu a {
  color: #fff;
}
.el-header {
  padding: 0;
}
.el-menu--horizontal>.el-menu-item, .el-menu--horizontal>.el-submenu {
  float: right;
}
</style>
<style scoped>
.content {
  height: calc(100vh - 60px);
}
.left-menu {
  height: 100%;
}
.logo {
  height: 30px;
  float: left;
  margin-top: 15px;
  margin-left: 30px;
}
</style>